<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2024-01-18 08:39:34
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-09-04 13:38:46
 * @FilePath: /things-admin/src/view/management/Management.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="header_nav">
      <div class="header">
        <span>用户昵称：</span>
        <Space size="large" wrap>
          <Input
            v-model.trim="nickname"
            style="width: 200px; margin-right: 40px"
            placeholder="请输入用户昵称"
          />
        </Space>
        <span>审核状态：</span>
        <Select
          v-model="model"
          style="width: 200px; margin-right: 40px"
          placeholder="审核状态"
        >
          <Option
            v-for="item in approvalStatusArr"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
        <DatePicker
          style="width: 200px; margin-right: 40px"
          type="daterange"
          placeholder="发布时间"
          @on-change="changeDate"
          format="yyyy-MM-dd"
          model-value="yyyy-MM-dd"
          v-model="date"
        ></DatePicker>

        <Button
          type="primary"
          icon="ios-search"
          style="margin: 0 10px"
          @click="searchData"
          size="default"
          >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="resetData"
          >重置</Button
        >
      </div>
      <div style="display: flex; align-items: center; margin-right: 20px">
        <div>发帖是否需要审核开关：</div>
        <el-switch v-model="valueBtn" @change="changeBtn"></el-switch>
      </div>
    </div>

    <div class="body">
      <Table border :columns="columns" :data="data" :max-height="600">
        <template slot-scope="{ row }" slot="icon">
          <!-- <span>{{
            row.urlType == 0 ? "空" : row.urlType == 1 ? "图片" : "视频"
          }}</span> -->
          <span v-show="row.urlType == 0">空</span>

          <el-image
            style="height: 50px"
            v-show="row.urlType == 1"
            :src="row.imglist[0]"
            :preview-src-list="row.imglist"
          >
          </el-image>
          <span
            v-show="row.urlType == 2"
            @click="enterVedio(row.urls)"
            style="cursor: pointer"
            >点击查看视频</span
          >
        </template>
        
        <template slot-scope="{ row }" slot="deleted">
          <p class="content">{{ !row.deleted ? "显示" : "不显示" }}</p>
        </template>
        <template slot-scope="{ row }" slot="approvalStatus">
          <p class="content">
            {{
              row.approvalStatus == 0
                ? "审核中"
                : row.approvalStatus == 1
                ? "已发布"
                : "未通过"
            }}
          </p>
        </template>
        <template #action="{ row }">
          <Button
            type="primary"
            size="small"
            @click="enterEdit(row.id, row.avatar, row.nickname)"
            v-if="Validation.check(Resources.COMMUNITY_UPDATE)"
            >编辑</Button
          >
          <Button
            type="success"
            size="small"
            style="margin-right: 5px"
            @click="readpin(row.id, row.content)"
            v-if="Validation.check(Resources.COMMUNITY_READ)"
            >查看评论</Button
          >
          <Button
            type="error"
            size="small"
            style="margin-right: 5px"
            @click="deleteid(row.id)"
            v-show="!row.deleted"
            v-if="Validation.check(Resources.AFFILIATE_DELETE)"
            >删除</Button
          >
        </template>
      </Table>
      <div
        style="display: flex; justify-content: space-between; margin-top: 20px"
      >
        <div></div>
        <Page
          :total="total"
          @on-change="changeSizeValue"
          @on-page-size-change="changePageSize"
          show-sizer
        />
      </div>
    </div>
    <Modal v-model="modal" title="提示" @on-ok="ok" @on-cancel="cancel">
      <p>确定要删除该条数据吗？</p>
    </Modal>
  </div>
</template>

<script>
import { momentAll, deletecomments } from "@/base/api/Moments";
import { Validation } from "@/base/Validation";
import { Resources } from "@/base/Resources";
export default {
  data() {
    return {
      nickname: "", // 用户昵称
      Validation:Validation,
      model: "", // 审核状态
      date: "", // 日期
      Reviewstatus: [], // 审核状态数据
      pageIndex: 1,
      Validation:Validation,
      Resources:Resources,
      deleteId: "",
      valueBtn: false,
      preview: false,
      modal: false,
      pageSize: 10,
      total: 0,
      columns: [
        {
          title: "用户昵称",
          key: "nickname",
        },
        {
          title: "手机号码",
          key: "phone",
        },
        {
          title: "显示状态",
          slot: "deleted",
        },
        {
          title: "内容",
          key: "content",
          tooltip: true,
        },
        {
          title: "图片",
          slot: "icon",
        },
        {
          title: "发布时间",
          key: "created",
        },
        {
          title: "审核状态",
          slot: "approvalStatus",
        },
        {
          title: "操作",
          slot: "action",
          width: 220,
          align: "left",
          fixed: "right",
        },
      ],
      data: [],
      approvalStatusArr: [
        {
          value: 0,
          label: "审核中",
        },
        {
          value: 1,
          label: "已发布",
        },
        {
          value: 2,
          label: "未通过",
        },
      ],
    };
  },
  methods: {
    changeDate(date) {
      console.log(date);
      this.date = date;
    },
    changeSizeValue(data) {
      this.pageIndex = data;
      this.getTableAll();
    },
    changeBtn(data) {
      console.log(data);
    },
    changePageSize(data) {
      this.pageIndex = 1;
      this.pageSize = data;
      this.getTableAll();
    },
    readpin(id, title) {
      this.$router.push({
        path: "/commentmanagement",
        query: {
          momentId: id,
          title,
        },
      });
    },
    // 搜素相关数据
    searchData() {
      this.getTableAll();
    },
    // 重置数据
    resetData() {
      this.nickname = "";
      this.date = "";
      this.model = "";
      this.getTableAll();
    },
    // 进入编辑页面
    enterEdit(id, avatar, nickname) {
      this.$router.push({
        path: "/management/edit",
        query: {
          id,
          avatar,
          nickname,
        },
      });
    },
    // 打开一个新的视频地址
    enterVedio(url) {
      window.open(url, "_blank");
    },
    // 删除评论
    deleteid(id) {
      this.modal = true;
      this.deleteId = id;
    },
    // 确定删除
    ok() {
      deletecomments(this.deleteId).then((res) => {
        this.$message.success("删除成功");
        this.getTableAll();
      });
    },
    // 查询所有数据
    getTableAll() {
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        nickname: this.nickname || "",
        createBegin: this.date[0] || "",
        createEnd: this.date[1] || "",
        approvalStatus: this.model,
      };
      momentAll(data).then((res) => {
        this.data = res.data.items;
        res.data.items.forEach((item) => {
          item.imglist = item.urls.split(",");
        });
        this.total = res.data.itemCount;
      });
    },
    cancel() {},
  },

  mounted() {
    this.getTableAll();
  },
};
</script>

<style lang="less" scoped>
.header_nav {
  display: flex;
  justify-content: space-between;
  background-color: #f8f8f8;
}
.header {
  height: 66px;
  //   width: 500px;

  display: flex;
  align-items: center;
  padding: 0 15px;
}
.body {
  margin-top: 20px;
  .content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>
